import { request } from '@/api/request';
import { PlateColorGroup } from '@/common';
import { DatePicker } from 'antd';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import type { YmColumnsType } from 'ym-design';
import { YmTable } from 'ym-design';
const SafeCarList = () => {
  const navigator = useNavigate();
  const [columns] = useState<YmColumnsType<any>>([
    {
      title: '车牌号',
      dataIndex: 'plateNumber',
      ellipsis: true,
      key: 'plateNumber',
      render(value, record, index) {
        return (
          <span
            className="safe-edu_table_operation_text"
            onClick={() => {
              navigator(
                `/safeIndex/safeIndexStatistics/carIndexInfo?plateNumber=${value}&entId=${record.entId}&carId=${record.carId}&safetyIndexCarId=${record.safetyIndexCarId}`,
              );
            }}
          >
            {value}
          </span>
        );
      },
    },
    {
      title: '车牌颜色',
      dataIndex: 'plateColor',
      key: 'plateColor',
      render: (text, record) => <span>{text ? PlateColorGroup[Number(text)] : '--'}</span>,
    },
    {
      title: '车辆安全指数',
      dataIndex: 'safetyIndex',
      ellipsis: true,
      key: 'safetyIndex',
      render: (text, record) => <span>{text.toFixed(0) || '--'}</span>,
      sorter: true,
    },
    {
      title: '所属企业',
      dataIndex: 'entName',
      ellipsis: true,
      key: 'entName',
    },
    {
      title: '车企关系',
      dataIndex: 'coopType',
      ellipsis: true,
      key: 'coopType',
      render: (text, record) => <span>{text == 51 ? '自有车' : text == 52 ? '外协车辆' : '--'}</span>,
    },
    {
      title: '行驶证所有人',
      dataIndex: 'ownerLicense',
      ellipsis: true,
      key: 'ownerLicense',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      ellipsis: true,
      key: 'createTime',
    },
  ]);
  const [tableDep, _reFreshTable] = useState<number>();
  const [searchParams, setEventParams] = useState({
    startTime: '',
    endTime: '',
  });

  return (
    <div style={{ background: '#fff', borderRadius: 4, height: '100%' }}>
      <YmTable
        searchForm={{
          formItems: [
            {
              label: '车牌号',
              name: 'plateNumber',
              valueType: {
                type: 'input',
                inputProps: {
                  placeholder: '请输入',
                  autoComplete: 'off',
                },
              },
            },
            {
              label: '所属企业',
              name: 'entName',
              valueType: {
                type: 'input',
                inputProps: {
                  placeholder: '请输入',
                  autoComplete: 'off',
                },
              },
            },
            {
              label: '车企关系',
              name: 'coopType',
              valueType: {
                type: 'select',
                selectProps: {
                  allowClear: true,
                  placeholder: '所有',
                  options: [
                    {
                      value: '',
                      label: '所有',
                    },
                    {
                      value: 51,
                      label: '企业自有车',
                    },
                    {
                      value: 52,
                      label: '外协车',
                    },
                  ],
                },
              },
            },
            {
              label: '创建时间',
              name: 'dateRange',
              children: (
                <DatePicker.RangePicker
                  style={{ width: '100%' }}
                  format="YYYY-MM-DD"
                  onChange={(date, formatDate) => {
                    if (formatDate) {
                      setEventParams({
                        startTime: formatDate[0] + ' 00:00:00' ?? '',
                        endTime: formatDate[1] + ' 23:59:59' ?? '',
                      });
                    }
                  }}
                />
              ),
            },
          ],
          span: 6,
        }}
        columns={columns}
        request={async ({ page, sorter }, form) => {
          // 重置的话，加这个，否则看着清了，实际还会传
          if (!form.dateRange) searchParams.startTime = searchParams.endTime = '';
          const options: { orderSort?: string } = { orderSort: '' };
          if (!Array.isArray(sorter)) {
            const { columnKey, order } = sorter ?? {};
            if (columnKey === 'safetyIndex') {
              options.orderSort = order === 'ascend' ? 'asc' : order === 'descend' ? 'desc' : '';
            }
          }
          const { data } = await request<{ list: any[]; total: number }>({
            url: '/unicron/ent/safetyIndex/entCarList',
            data: {
              ...searchParams,
              ...page,
              ...options,
              ...form,
            },
          });
          return data;
        }}
        requestOptions={{
          reFreshDep: [tableDep],
          defaultPageSize: 10,
        }}
        rowKey="safetyIndexCarId"
      />
    </div>
  );
};
export default SafeCarList;
